<template>
	<view class="recommend">
		<view class="title">推荐歌曲</view>
		<view class="for-you">
			<view>为你精选推荐</view>
			<view class="more">
				更多
				<text class="iconfont icon-you"></text>
			</view>
		</view>
		<scroll-view scroll-x enable-flex enhanced class="recommend-scroll">
			<view class="scrollview ">
				<view v-for="item in recommmendLs" @click="toPlayList(item.id)" :key="item.id" class="recommend-scroll-item">
					<image :src="item.picUrl" lazy-load mode="" class="recommend-img"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="line"></view>
		<view class="rank">
			<view class="rank-top">
				<view class="rank-title">排行榜</view>
				<view class="more">
					更多
					<text class="iconfont icon-you"></text>
				</view>
			</view>
			<swiper
				circular
				next-margin="100rpx"
				class="rank-content"
			>
				<swiper-item v-for="item in topList" :key="item.id">
					<view class="rank-content-title">{{item.name}}</view>
					<view class="rank-content-info" @click="toMusicPage(item.id, tracks.id, index)" v-for="(tracks, index) in item.tracks" :key="tracks.id">
						<image :src="tracks.al.picUrl" lazy-load></image>
						<view class="content-right">
							<text class="serial-num">{{index + 1}}</text>
							<text class="info-name">{{tracks.name}}</text>
							<text>--</text>
							<text class="info-author">{{tracks.ar[0].name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { getMusicDetail } from "../../../api/index.js"
	export default {
		props: {
			// 排行榜列表
			topList: {
				type: Array,
				default: []
			},
			// 推荐列表
			recommmendLs: {
				type: Array,
				default: []
			}
		},
		methods: {
			// // 点击排行榜某一项时触发
			async toMusicPage(bigId, smallId, cur_index) {
				const {data: {playlist: item}} = await getMusicDetail(bigId)
				// 更新store中的播放列表
				this.$store.dispatch('changeMusicPlaylist', item.tracks)
				uni.navigateTo({
					url: `/pages/musicplayer/musicplayer?id=${smallId}&cur_index=${cur_index}&flag=1`
					// url: '/pages/musicplayer/musicplayer?id=' + smallId + '&playListId=' + bigId + '&cur_index=' + cur_index
				 });
			},
			// 点击推荐歌曲某一项时触发
			toPlayList (playListId) {
				uni.navigateTo({
					url: '/pages/playlist/playlist?playListId=' + playListId
				})
			}
		}
	}
</script>

<style lang="scss">
	// 去除scroll-view组件的滚动条
	// 不想写在 app.vue全局中,就要写在页面必须加深度选择器才有效
	/deep/::-webkit-scrollbar {
		 display: none;
		 width: 0;
		 height: 0;
	}
	.line {
		border-bottom: 20rpx solid #eaeaea;
		margin: 0 -15rpx;
	}
	.recommend {
		padding: 15rpx;
		.title {
			font-size: 40rpx;
		}
		.for-you {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 15rpx 0;
			color: #8a8382;
		}
		.more {
			border: 1px solid #8a8382;
			box-sizing: content-box;
			font-size: 25rpx;
			height: 30rpx;
			line-height: 30rpx;
			padding: 0 10rpx;
			border-radius: 20rpx;
			color: black;
			.icon-you {
				font-size: inherit;
				margin-left: 10rpx;
			}
		}
		.recommend-scroll {
			display: flex;
			white-space: nowrap;
			height: 270rpx;
			.scrollview  {
				display: flex;
				.recommend-scroll-item {
					width: 200rpx;
					margin-right: 20rpx;
					.recommend-img {
						box-shadow: 0rpx -22rpx 5rpx -14rpx #ddd;
						border-radius: 20rpx;
						width: 200rpx;
						height: 200rpx;
            /* #ifdef APP-PLUS */
            background: url('@/static/images/song/default.png') no-repeat center center;
            background-size: cover;
            /* #endif */
					}
					text {
						font-size: 26rpx;
						/* 单行文本溢出隐藏，省略号代替 */
						/* 要转为块级元素才能使用overflow:hidden切割 */
						display: block;
						white-space:nowrap;
						overflow:hidden;
						text-overflow: ellipsis;
						/*
						// 多行文本溢出隐藏，省略号代替
						overflow: hidden;
						text-overflow: ellipsis;
						// 设置为webkit内核盒子元素
						display: -webkit-box;
						// 设置对齐模式
						-webkit-box-orient: vertical;
						// 设置盒子的行数
						-webkit-line-clamp: 2;
						*/
					}
				}
			}
		}
		.rank {
			margin-top: 20rpx;
			.rank-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				.rank-title {
					font-size: 36rpx;
				}
			}
			.rank-content {
				height: 500rpx;
				width: 100%;
				/* #ifdef H5 */
				margin-bottom: 100rpx;
				/* #endif */
			}
			.rank-content-title {
				font-size: 40rpx;
				font-weight: 400;
			}
			.rank-content-info {
				display: flex;
				margin: 15rpx 0;
				image {
					width: 100rpx;
					height: 100rpx;
					min-width: 100rpx;
					border-radius: 15rpx;
          /* #ifdef APP-PLUS */
          background: url('@/static/images/song/default.png') no-repeat center center;
          background-size: cover;
          /* #endif */
				}
				.content-right {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 100rpx;
					.serial-num {
						margin: 20rpx;
						color: black;
					}
					.info-name {
						font-size: 32rpx;
						font-weight: 450;
						color: black;
					}
					.info-author,text {
						font-size: 28rpx;
						color: #ccc;
					}
				}
			}
		}
	}
</style>
